<template>
	<view class="container">

		<view class="user-section">
			<image class="bg" src="/static/user-bg.jpg"></image>
			<view class="user-info-box" v-if="hasUserInfo">
				<view class="portrait-box">
					<image class="portrait" :src="userInfo.headicon || defaultHeadIcon" @click="toSetPage"></image>
				</view>
				<view class="info-box">
					<view>
						<text class="username">{{userInfo.nickname || '暂无昵称'}}</text>
						<text class="iconfont iconicon-test zy-vip-icon" :style="{color: isDistribution ? '#fa436a' : '#6D6D6D'}"></text>
					</view>
					<view v-if="hasPhone">
						<text class="phone">{{userInfo.phone}}</text>
					</view>
					<view v-else>
						<!-- #ifdef MP-WEIXIN -->
						<button class="zy-wx-btn zy-get-phone" open-type="getPhoneNumber" lang="zh_CN" @getphonenumber="bindGetPhoneNumber">
							获取手机号
						</button>
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<view>
							暂无手机号
						</view>
						<!-- #endif -->
					</view>
				</view>
			</view>
			<view class="user-info-box" v-else>
				<view class="portrait-box">
					<image class="portrait" :src="defaultHeadIcon"></image>
				</view>
				<view class="info-box">
					<view class="zy-display-flex">
						<!-- #ifdef MP-WEIXIN -->
						<button class="zy-wx-btn" open-type="getUserInfo" lang="zh_CN" @getuserinfo="bindGetUserInfo">
							<view class="zy-text-big zy-text-bold" style="padding-top: 30upx;">点击登录</view>
						</button>
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<button class="zy-wx-btn" @click="gzhLogin">
							<view class="zy-text-big zy-text-bold" style="padding-top: 30upx;">点击登录</view>
						</button>
						<!-- #endif -->
						<text class="iconfont iconicon-test zy-vip-icon"></text>
					</view>
					<view>
						您还未登录哦
					</view>
				</view>
			</view>
			<view class="vip-card-box">
				<view class="tit">
					<text class="iconfont iconicon-test zy-vip-icon"></text>
					分销商
				</view>
				<!-- 不是分销商并且需要购买指定商品时才需要显示这个按钮 -->
				<view class="b-btn" @click="toAgentPage" v-if="!isDistribution && distributionFlag">
					成为分销商
				</view>
				<text class="e-m" v-if="distributionFlag">购买指定商品成为分销商</text>
				<text class="e-m" v-else>购买商品成为分销商</text>
				<text class="e-b">分享好友购物得佣金，佣金即时到账</text>
			</view>
		</view>

		<view class="cover-container" :style="[{
				transform: coverTransform,
				transition: coverTransition
			}]">
			<!--
			@touchstart="coverTouchstart" @touchmove="coverTouchmove" @touchend="coverTouchend">
			-->
			<image class="arc" src="/static/arc.png"></image>

			<view class="tj-sction">
				<view class="tj-item" @click="toWalletBalancePage">
					<text class="num">{{userWallet.usableRmbBalance}}</text>
					<text>余额</text>
				</view>
				<view class="tj-item" @click="toWalletBalancePage">
					<text class="num">{{userWallet.usableIntegral}}</text>
					<text>积分</text>
				</view>
				<view class="tj-item" @click="toCouponPage">
					<text class="num">{{couponCount}}</text>
					<text>优惠券</text>
				</view>
			</view>
			<!-- 订单 -->
			<view class="order-section">
				<view class="order-item" @click="toOrderPage(0)" hover-class="common-hover" :hover-stay-time="50">
					<zywork-icon type="icontuxing" color="#fa436a" size="20" class="iconfont" />
					<text>全部订单</text>
				</view>
				<view class="order-item" @click="toOrderPage(1)" hover-class="common-hover" :hover-stay-time="50">
					<zywork-icon type="iconfukuan1" color="#fa436a" size="20" class="iconfont" />
					<text>待付款</text>
				</view>
				<view class="order-item" @click="toOrderPage(2)" hover-class="common-hover" :hover-stay-time="50">
					<zywork-icon type="icondaishouhuo" color="#fa436a" size="20" class="iconfont" />
					<text>待收货</text>
				</view>
				<view class="order-item" @click="toOrderPage(3)" hover-class="common-hover" :hover-stay-time="50">
					<zywork-icon type="iconpingjia" color="#fa436a" size="20" class="iconfont" />
					<text>待评价</text>
				</view>
			</view>
			<!-- 分销 -->
			<view class="order-section">
				<view class="order-section-item">
					<zywork-icon type="iconyongjin" color="#fa436a" size="24" style="margin-right: 20upx;"/>
					<view class="order-item" @click="toCommissionPage" hover-class="common-hover" :hover-stay-time="50">
						<text>分销佣金</text>
						<view style="display: flex; align-items: center;">
							<text class="zy-text-big zy-text-bold" style="color: #fa436a;">{{distributionCount}}</text>
							<text class="zy-text-small">元</text>
						</view>
					</view>
				</view>
				<view class="order-section-item">
					<zywork-icon type="icongroup" color="#fa436a" size="24" style="margin-right: 20upx;"/>
					<view class="order-item" @click="toTeamPage" hover-class="common-hover" :hover-stay-time="50">
						<text>我的团队</text>
						<view style="display: flex; align-items: center;">
							<text class="zy-text-big zy-text-bold" style="color: #fa436a;">{{teamTotal}}</text>
							<text class="zy-text-small">个</text>
						</view>
					</view>
					
				</view>

			</view>
			<!-- 浏览历史 -->
			<view class="list-cell-section icon">
				<view class="sec-header">
					<text class="iconfont iconhistory" style="color:#F06C7A"></text>
					<text>浏览历史</text>
				</view>
				<scroll-view v-if="productHistoryArray.length > 0" scroll-x class="h-list">
					<image v-for="(item, index) in productHistoryArray" :key="index" @click="navToProduct(item.goodsId)" :src="localFileStorage ? frontBaseUrl + item.imgSrc : item.imgSrc"
					 mode="aspectFill"></image>
				</scroll-view>
				<view v-else class="zy-not-browser-history">暂无浏览记录</view>
				<!-- <list-cell icon="icon-iconfontweixin" iconColor="#e07472" title="我的钱包" tips="您的会员还有3天过期"></list-cell> -->
				<list-cell icon="icondizhi" iconColor="#5fcda2" title="地址管理" @eventClick="toAddressPage"></list-cell>
				<list-cell icon="iconfenxiang" iconColor="#9789f7" title="分享邀请" tips="邀请好友得佣金" @eventClick="toSharePage"></list-cell>
				<!-- <list-cell icon="icon-pinglun-copy" iconColor="#ee883b" title="晒单" tips="晒单抢红包"></list-cell> -->
				<list-cell icon="iconshoucang1" iconColor="#54b4ef" title="我的收藏" @eventClick="toCollectionPage"></list-cell>
				<list-cell icon="iconhaoping" iconColor="#528330" title="我的评价" @eventClick="toEvaluatePage"></list-cell>
				<button open-type="contact">
					<list-cell icon="iconkefu" iconColor="#230BF9" title="在线客服"></list-cell>
				</button>
				<list-cell v-if="isPickUp" icon="iconmendianzitidaihexiaosvg" iconColor="#5982030" title="门店核销" @eventClick="toScanQrcode"></list-cell>
				<list-cell icon="iconshezhi" iconColor="#e07472" title="设置" border="" @eventClick="toSetPage"></list-cell>
			</view>
		</view>
		<official-account></official-account>
	</view>
</template>
<script>
	import zyworkIcon from '@/components/zywork-icon/zywork-icon.vue'
	import listCell from '@/components/mix-list-cell';
	import {
		COUPON_PAGE,
		SHARE_PAGE,
		SET_PAGE,
		ADDRESS_PAGE,
		NOTICE_PAGE,
		ORDER_PAGE,
		COMMISSION_PAGE,
		TEAM_PAGE,
		WALLET_BALANCE_PAGE,
		WALLET_INTEGRAL_PAGE,
		COLLECTION_PAGE
	} from '@/common/page-url.js'
	import * as ResponseStatus from '@/common/response-status.js'
	import {
		BASE_URL,
		doPostForm,
		doPostJson,
		showInfoToast,
		doGet,
		nullToStr,
		DEFAULT_HEADICON,
		USER_OPENID,
		USER_TOKEN_KEY,
		MY_SHARE_CODE,
		USER_ID,
		USER_ROLES,
		USER_PHONE,
		HAS_USER_INFO,
		FRONT_BASE_URL,
		LOCAL_FILE_STORAGE,
		SHARE_CODE,
		MALL_DISTRIBUTOR_FLAG
	} from '@/common/util.js'
	import {
		getProductHistory
	} from '@/common/storage.js'
	import {
		mapState
	} from 'vuex';
	let startY = 0,
		moveY = 0,
		pageAtTop = true;
	export default {
		components: {
			listCell,
			zyworkIcon
		},
		data() {
			return {
				defaultHeadIcon: DEFAULT_HEADICON,
				hasUserInfo: false,
				urls: {
					xcxSaveUserInfoUrl: '/wx-auth/xcx-userdetail',
					xcxSavePhoneUrl: '/wx-auth/xcx-phone',
					xcxLoginUrl: '/wx-auth/xcx',
					getUserDetailUrl: '/user-userdetail/user/get',
					getUserRolesUrl: '/user-role/user/list',
					userWalletUrl: '/user-wallet/user/one',
					distributionAmountUrl: '/account-detail/user/distribution-amount',
					couponSearchUrl: '/goods-user-coupon/user/all-cond'
				},
				couponCount: 0,
				userInfo: {},
				hasPhone: false,
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				moving: false,
				teamCount: [],
				teamTotal: 0,
				distributionCount: 0,
				productHistoryArray: [],
				frontBaseUrl: FRONT_BASE_URL,
				localFileStorage: LOCAL_FILE_STORAGE,
				userWallet: {
					usableRmbBalance: 0,
					usableIntegral: 0
				},
				distributionFlag: false,
				isDistribution: false,
				isPickUp: false
			}
		},
		onLoad(options) {
			// #ifdef H5
			let openid = options.openid
			let token = options.token
			if (openid && token) {
				// 公众号授权登录成功返回的openid和token
				uni.setStorageSync(USER_OPENID, openid)
				uni.setStorageSync(USER_TOKEN_KEY, token)
			}
			// #endif
			this.loadData('init');
			this.loadDistribuionFlag()
		},
		onShow() {
			this.loadHistoryData()
		},
		// 下拉刷新
		onPullDownRefresh() {
			if (this.hasUserInfo) {
				this.getUserDetail()
				setTimeout(function() {
					uni.stopPullDownRefresh()
				}, 500)
				
			} else {
				this.loadData('pullDown')
			}
		},
		// #ifndef MP
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				this.toSetPage();
			} else if (index === 1) {
				// #ifdef APP-PLUS
				const pages = getCurrentPages();
				const page = pages[pages.length - 1];
				const currentWebview = page.$getAppWebview();
				currentWebview.hideTitleNViewButtonRedDot({
					index
				});
				// #endif
				this.toNoticePage();
			}
		},
		// #endif
		computed: {},
		methods: {
			/**
			 * 加载数据
			 * @param {Object} type
			 */
			loadData(type) {
				this.judgeLogin(type);
			},
			/**
			 * 检查登录
			 * @param {Object} type
			 */
			judgeLogin(type) {
				const userToken = uni.getStorageSync(USER_TOKEN_KEY);
				if (userToken) {
					uni.checkSession({
						success: () =>  {
							// 用户token存在，且微信登录状态正常，则直接获取用户信息
							this.getUserDetail()
						},
						fail: () => {
							// 重新授权登录，获取新session_key
							this.xcxLogin()
						},
					})
				} else {
					// #ifdef MP-WEIXIN
					this.xcxLogin()
					// #endif
					// #ifdef H5
					this.gzhLogin()
					// #endif
				}
				if (type === 'pullDown') {
					uni.stopPullDownRefresh();
				}
			},
			/**
			 * 小程序登入
			 */
			xcxLogin() {
				var myThis = this;
				uni.login({
					provider: 'weixin',
					success: function(wxRes) {
						let theShareCode = uni.getStorageSync(SHARE_CODE)
						if (!theShareCode) {
							theShareCode = null
						}
						const data = {
							code: wxRes.code,
							shareCode: theShareCode
						}
						doGet(myThis.urls.xcxLoginUrl, data, {}, false).then(response => {
							let [error, res] = response;
							if (res.data.code === ResponseStatus.OK) {
								// 保存用户的openid和token
								uni.setStorageSync(USER_OPENID, res.data.data[1]);
								uni.setStorageSync(USER_TOKEN_KEY, res.data.data[2]);
								if (res.data.data[0] === 'firstLogin') {
									// 第一次小程序登录，需要点击登录按钮，才能获取用户信息再保存用户信息
									uni.removeStorageSync(SHARE_CODE);
								} else {
									// 第二次开始不需要点击登录按钮，而是直接从后台获取用户信息
									myThis.getUserDetail();
								}
							} else {
								showInfoToast(res.data.message);
							}
						}).catch(err => {
							console.log(err);
						})
					}
				})
			},
			gzhLogin() {
				const shareCode = uni.getStorageSync(SHARE_CODE);
				const data = {
					extraParams : FRONT_BASE_URL + '#/pages/user/user__' + FRONT_BASE_URL + '#/pages/user/user__' + (shareCode ? shareCode : 'shareCode')
				}
				doGet('/wx-auth/to-gzh', data, {}, false).then(response => {}).catch(err => {
					console.log(err);
				})
			},
			/**
			 * 获取用户详情
			 */
			getUserDetail() {
				uni.showLoading({
					title: '登录中...'
				})
				doGet(this.urls.getUserDetailUrl, {}, {}, true).then(response => {
					uni.hideLoading()
					let [error, res] = response;
					if (res.data.code === ResponseStatus.OK) {
						if (res.data.data.total > 0) {
							var userInfo = nullToStr(res.data.data.rows[0]);
							if (userInfo.userDetailNickname) {
								this.userInfo.nickname = userInfo.userDetailNickname;
							}
							if (userInfo.userDetailHeadicon) {
								this.userInfo.headicon = userInfo.userDetailHeadicon;
								if (this.userInfo.headicon !== '' && this.userInfo.headicon.indexOf('http') < 0) {
									this.userInfo.headicon = FRONT_BASE_URL + this.userInfo.headicon;
								}
							}
							if (userInfo.userDetailGender) {
								this.userInfo.gender = userInfo.userDetailGender;
							}
							if (userInfo.userPhone) {
								this.hasPhone = true
								this.userInfo.phone = userInfo.userPhone;
							}
							if (this.userInfo.nickname && this.userInfo.headicon) {
								// 已经获取到了用户信息
								this.hasUserInfo = true;
								uni.setStorageSync(USER_ID, userInfo.userId);
								uni.setStorageSync(HAS_USER_INFO, true);
								// 加载其他用户数据
								this.loadOtherUserData()
							} else {
								uni.setStorageSync(HAS_USER_INFO, false);
							}
							uni.setStorageSync(USER_PHONE, userInfo.userPhone);
							uni.setStorageSync(MY_SHARE_CODE, userInfo.userDetailShareCode)
						}
					} else if (res.data.code === ResponseStatus.AUTHENTICATION_TOKEN_ERROR) {
						// 如果token过期了，则直接使用小程序登录，获取最新的token
						uni.removeStorageSync(USER_TOKEN_KEY);
						uni.removeStorageSync(USER_OPENID);
						uni.removeStorageSync(USER_ID)
						uni.setStorageSync(HAS_USER_INFO, false);
						this.xcxLogin();
					} else {
						showInfoToast(res.data.message);
					}
				}).catch(err => {
					console.log(err);
				})
			},
			/**
			 * 获取用户的角色信息
			 */
			getUserRoles() {
				doGet(this.urls.getUserRolesUrl, {}, {}, true).then(response => {
					let [error, res] = response;
					if (res.data.code === ResponseStatus.OK) {
						var rolesArrey = []
						uni.setStorageSync(MALL_DISTRIBUTOR_FLAG, false)
						res.data.data.rows.forEach(item => {
							rolesArrey.push(item.roleTitle);
							if (item.roleTitle.indexOf('sys_mall_distributor_v') != -1) {
								uni.setStorageSync(MALL_DISTRIBUTOR_FLAG, true)
								this.isDistribution = true
							}
							if (item.roleTitle.indexOf('sys_mall_pickup_v') != -1) {
								this.isPickUp = true
							}
						})
						uni.setStorageSync(USER_ROLES, rolesArrey);
					} else {
						showInfoToast(res.data.message);
					}
				}).catch(err => {
					console.log(err);
				})
			},
			/**
			 * 获取用户信息
			 * @param {Object} e
			 */
			bindGetUserInfo(e) {
				const openId = uni.getStorageSync(USER_OPENID);
				const data = {
					openid: openId,
					nickname: e.detail.userInfo.nickName,
					headicon: e.detail.userInfo.avatarUrl,
					gender: e.detail.userInfo.gender
				};
				uni.showLoading({
					title: '登录中...'
				})
				doPostForm(this.urls.xcxSaveUserInfoUrl, data, {}, false).then(response => {
					let [error, res] = response;
					if (res.data.code === ResponseStatus.OK) {
						this.hasUserInfo = true;
						this.userInfo.nickname = data.nickname;
						this.userInfo.headicon = data.headicon;
						// 设置已登录并且获取用户信息
						uni.setStorageSync(HAS_USER_INFO, true)
						// 加载其他用户数据
						this.loadOtherUserData()
					} else {
						showInfoToast(res.data.message);
					}
					uni.hideLoading()
				}).catch(err => {
					console.log(err)
				})
			},
			/**
			 * 小程序获取用户手机
			 * @param {Object} e
			 */
			bindGetPhoneNumber(e) {
				uni.showLoading({
					title: '获取中...'
				})
				if (e.detail.errMsg === 'getPhoneNumber:ok') {
					const openId = uni.getStorageSync(USER_OPENID)
					const data = {
						openid: openId,
						encryptedData: e.detail.encryptedData,
						iv: e.detail.iv
					}
					doPostForm(this.urls.xcxSavePhoneUrl, data, {}, false).then(response => {
						uni.hideLoading()
						let [error, res] = response
						if (res.data.code === ResponseStatus.OK) {
							this.userInfo.phone = res.data.data.phoneNumber
							this.hasPhone = true
							showInfoToast('已获取手机号')
						} else {
							showInfoToast(res.data.message);
						}
					}).catch(err => {
						uni.hideLoading()
						console.log(err)
					})
				} else {
					uni.hideLoading()
					showInfoToast('微信服务端未能正常返回手机号')
				}
			},
			/**
			 * 获取钱包信息
			 */
			loadWalletInfo() {
				doGet(this.urls.userWalletUrl, {}, {}, true).then(response => {
					let [error, res] = response;
					if (res.data.code === ResponseStatus.OK) {
						this.userWallet = res.data.data;
					} else {
						showInfoToast(res.data.message);
					}
				}).catch(err => {
					console.log(err)
				})
			},
			loadOtherUserData() {
				this.getUserRoles()
				this.loadWalletInfo()
				this.loadTeamCount()
				this.loadDistribuionAmount()
			},
			/**
			 * 加载团队人数
			 */
			loadTeamCount() {
				doPostForm('/distribution/user/below-users-per-level', {levels: [2, 3]}, {}, true).then(response => {
					let [error, res] = response
					if (res.data.code === ResponseStatus.OK) {
						this.teamCount = res.data.data
						if (this.teamCount.length > 0) {
							this.teamTotal = 0
							this.teamCount.forEach((item, index) => {
								this.teamTotal += item
							})
						}
					}
				}).catch(error => {
					console.log(error)
				})
			},
			/**
			 * 加载分销佣金
			 */
			loadDistribuionAmount() {
				doGet(this.urls.distributionAmountUrl, {}, {}, true).then(response => {
					let [error, res] = response
					if (res.data.code === ResponseStatus.OK) {
						this.distributionCount = res.data.data
					}
				}).catch(err => {
					console.log(err)
				})
			},
			/**
			 * 加载优惠券数量
			 */
			loadCouponCount() {
				let params = {
					couponStatus: 0
				}
				doPostJson(this.urls.couponSearchUrl, params, {}, true).then(response => {
					let [error, res] = response
					if (ResponseStatus.OK === res.data.code) {
						this.couponCount = res.data.data.total
					}
				}).catch(err => {
					console.log(err)
				})
			},
			/**
			 * 加载浏览历史
			 */
			loadHistoryData() {
				// 加载浏览历史
				var productHistory = getProductHistory()
				this.productHistoryArray = []
				if (productHistory.length > 0) {
					this.productHistoryArray = productHistory
				}
			},
			navToProduct(goodsId) {
				uni.navigateTo({
					url: `/pages/product/product?gi=${goodsId}&fromPage=his`
				})
			},
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(url) {
				if (!uni.getStorageSync(HAS_USER_INFO)) {
					console.log('test')
					// #ifdef MP-WEIXIN
					showInfoToast('请点击登录')
					// #endif
					// #ifdef H5
					this.gzhLogin()
					// #endif
				} else {
					uni.navigateTo({
						url
					})
				}
			},

			/**
			 *  会员卡下拉和回弹
			 *  1.关闭bounce避免ios端下拉冲突
			 *  2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
			 *    transition设置0.1秒延迟，让css来过渡这段空窗期
			 *  3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-bezier.com/
			 */
			coverTouchstart(e) {
				if (pageAtTop === false) {
					return;
				}
				this.coverTransition = 'transform .1s linear';
				startY = e.touches[0].clientY;
			},
			coverTouchmove(e) {
				moveY = e.touches[0].clientY;
				let moveDistance = moveY - startY;
				if (moveDistance < 0) {
					this.moving = false;
					return;
				}
				this.moving = true;
				if (moveDistance >= 80 && moveDistance < 100) {
					moveDistance = 80;
				}

				if (moveDistance > 0 && moveDistance <= 80) {
					this.coverTransform = `translateY(${moveDistance}px)`;
				}
			},
			coverTouchend() {
				if (this.moving === false) {
					return;
				}
				this.moving = false;
				this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
				this.coverTransform = 'translateY(0px)';
			},
			/**
			 * 前往通知页面
			 */
			toNoticePage() {
				this.navTo(NOTICE_PAGE);
			},
			/**
			 * 前往我的优惠券
			 */
			toCouponPage() {
				showInfoToast('优惠券')
				// this.navTo(COUPON_PAGE);
			},
			/**
			 * 前往分享
			 */
			toSharePage() {
				this.navTo(SHARE_PAGE);
			},
			/**
			 * 前往设置
			 */
			toSetPage() {
				this.navTo(SET_PAGE);
			},
			/**
			 * 前往地址设置
			 */
			toAddressPage() {
				this.navTo(ADDRESS_PAGE);
			},
			/**
			 * 前往订单页面
			 */
			toOrderPage(type) {
				this.navTo(ORDER_PAGE + '?state=' + type);
			},
			loadDistribuionFlag() {
				doGet('/sys-config/any/distribution-config', {}, {}).then(response => {
					let [error, res] = response
					if (res.data.code === ResponseStatus.OK) {
						this.distributionFlag = res.data.data.distributionAgentSwitch
					} else {
						showInfoToast(res.data.message)
					}
				}).catch(err => {
					console.log(err)
				})
			},
			/**
			 * 前往成为代理商商品列表页面
			 */
			toAgentPage() {
				if (this.distributionFlag) {
					this.navTo('/pages/agent/agent')
				} else {
					this.navTo('/pages/share/share?distributionFlag=false')
				}
			},
			/**
			 * 前往佣金页面
			 */
			toCommissionPage() {
				this.navTo(COMMISSION_PAGE + '?totalAmount=' + this.distributionCount);
			},
			/**
			 * 前往我的团队页面
			 */
			toTeamPage() {
				this.navTo(TEAM_PAGE + '?teamCount=' + JSON.stringify(this.teamCount));
			},
			/**
			 * 前往用户钱包余额页面
			 */
			toWalletBalancePage() {
				this.navTo('/pages/wallet/user-wallet?userWallet=' + JSON.stringify(this.userWallet));
			},
			/**
			 * 前往用户钱包积分页面
			 */
			// toWalletIntegralPage() {
			// 	this.navTo(WALLET_INTEGRAL_PAGE + '?userWallet=' + JSON.stringify(this.userWallet));
			// },
			/**
			 * 前往我的收藏
			 */
			toCollectionPage() {
				this.navTo(COLLECTION_PAGE)
			},
			/**
			 * 前往我的评价
			 */
				
			toEvaluatePage() {
				this.navTo('/pages/evaluate/my-evaluate')
			},
			toScanQrcode() {
				uni.scanCode({
					scanType: 'qrCode',
					success: (res) => {
						let result = res.result
						if (result.startsWith('VO::')) {
							let orderId = result.split('::')[2]
							uni.navigateTo({
								url: `/pages/order/orderDetailVerification?orderId=${orderId}`
							})
						}
					},
					fail: () => {
						showInfoToast('取消扫描或扫描二维码失败')
					}
				})
			}
			
		}
	}
</script>
<style lang='scss'>
	@import '@/common/zywork-main.scss';

	%flex-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	%section {
		display: flex;
		justify-content: space-around;
		align-content: center;
		background: #fff;
		border-radius: 10upx;
	}

	.user-section {
		height: 520upx;
		padding: 100upx 30upx 0;
		position: relative;

		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			filter: blur(1px);
			opacity: .7;
		}
	}

	.user-info-box {
		height: 180upx;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 1;

		.portrait {
			width: 130upx;
			height: 130upx;
			border: 5upx solid #fff;
			border-radius: 50%;
		}

		.username {
			font-size: $font-lg + 6upx;
			color: $font-color-dark;
			margin-left: 20upx;
		}

		.phone {
			font-size: $font-sm + 6upx;
			margin-left: 20upx;
		}

		.zy-vip-icon {
			margin-left: 20upx;
			font-size: 46upx;
		}
	}

	.vip-card-box {
		display: flex;
		flex-direction: column;
		color: #f7d680;
		height: 240upx;
		background: linear-gradient(left, rgba(0, 0, 0, .7), rgba(0, 0, 0, .8));
		border-radius: 16upx 16upx 0 0;
		overflow: hidden;
		position: relative;
		padding: 20upx 24upx;

		.card-bg {
			position: absolute;
			top: 20upx;
			right: 0;
			width: 380upx;
			height: 260upx;
			opacity: 0.4;
		}

		.b-btn {
			position: absolute;
			right: 20upx;
			top: 16upx;
			width: 150upx;
			height: 50upx;
			text-align: center;
			line-height: 50upx;
			font-size: 28upx;
			color: #36343c;
			border-radius: 20px;
			background: linear-gradient(left, #f9e6af, #ffd465);
			z-index: 1;
		}

		.tit {
			font-size: $font-base+4upx;
			color: #f7d680;
			margin-bottom: 28upx;

			.iconfont {
				color: #f6e5a3;
				margin-right: 16upx;
			}
		}

		.e-b {
			font-size: $font-sm;
			color: #d8cba9;
			margin-top: 10upx;
		}
	}

	.cover-container {
		background: $page-color-base;
		margin-top: -45upx;
		padding: 0 30upx;
		position: relative;
		background: #f5f5f5;
		padding-bottom: 20upx;

		.arc {
			position: absolute;
			left: 0;
			top: -34upx;
			width: 100%;
			height: 36upx;
		}
	}

	.tj-sction {
		@extend %section;

		.tj-item {
			@extend %flex-center;
			flex-direction: column;
			height: 140upx;
			font-size: $font-sm;
			color: #75787d;
		}

		.num {
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 8upx;
		}
	}

	.order-section {
		@extend %section;
		padding: 28upx 0;
		margin-top: 20upx;

		.order-item {
			@extend %flex-center;
			width: 120upx;
			height: 120upx;
			border-radius: 10upx;
			font-size: $font-sm;
			color: $font-color-dark;
		}

		.iconfont {
			font-size: 48upx;
			margin-bottom: 18upx;
			color: #fa436a;
		}

		.icon-shouhoutuikuan {
			font-size: 44upx;
		}

		.order-section-item {
			display: flex;
			flex-direction: row;
			align-items: center;
		}

	}

	.list-cell-section {
		padding: 30upx 0 0;
		margin-top: 20upx;
		background: #fff;
		border-radius: 10upx;

		.sec-header {
			display: flex;
			align-items: center;
			font-size: $font-base;
			color: $font-color-dark;
			line-height: 40upx;
			margin-left: 30upx;

			.iconfont {
				font-size: 44upx;
				color: #5eba8f;
				margin-right: 16upx;
				line-height: 40upx;
			}
		}

		.h-list {
			white-space: nowrap;
			padding: 30upx 30upx 0;

			image {
				display: inline-block;
				width: 160upx;
				height: 160upx;
				margin-right: 20upx;
				border-radius: 10upx;
			}
		}
		
		button {
			background: none;
			width: 100%;
			height: 100%;
			padding: 0;
			text-align: left;
		}
	}

	.zy-not-browser-history {
		margin: 10upx 90upx;
	}

	.zy-wx-btn {
		text-align: left;
		line-height: 1;
		display: inline;
		padding: 0;
		background-color: transparent;
	}

	.zy-get-phone {
		margin-top: 20upx;
		font-size: 30upx;
		margin-left: 20upx;
	}

	.info-box {
		margin-left: 20upx;
	}

	button::after {
		border: none;
	}
</style>
